<template>
    <el-container class="fill" style="width: 1200px;margin: 0 auto;">
        <el-main class="fill" style="overflow: hidden;">
            <el-form class="declare" @submit.native.prevent ref="form" label-width="90px">
                <p style="font-size: 36px;color: #333333;margin-bottom: 50px;text-align: center;">工程担保保证人资料填写</p>
                <div class="declareRow">
                    <div>
                        <p>单位名称</p>
                        <el-input type="text" v-model.trim="form.companyName" placeholder="请输入单位名称"></el-input>
                    </div>
                    <div>
                        <p>联系人</p>
                        <el-input type="text" v-model.trim="form.realName" placeholder="请输入联系人"></el-input>
                    </div>
                </div>
                <div class="declareRow">
                    <div>
                        <p>固定电话</p>
                        <el-input type="text" v-model.trim="form.fixTelephone" placeholder="请输入固定电话"></el-input>
                    </div>
                    <div>
                        <p>地址</p>
                        <el-input type="text" v-model.trim="form.address" placeholder="请输入地址"></el-input>
                    </div>
                </div>
                <div class="declareRow">
                    <div>
                        <p>手机号</p>
                        <el-input type="text" v-model.trim="form.telephone" placeholder="请输入手机号"></el-input>
                    </div>
                    <div>
                        <p>验证码</p>
                        <div class="declareRow">
                            <el-input type="text" style="width: 60%;" v-model.trim="form.code" placeholder="请输入验证码">
                            </el-input>
                            <input class="declare_getcode" readonly="readonly" :value="verifyCode" :disabled="disabled"
                                @click="getVerifyCode" />
                        </div>
                    </div>
                </div>
                <div class="declareRow">
                    <div>
                        <div>
                            <p>保单查询地址（选填）</p>
                            <p style="color: #999999;font-size: 15px;">示例：http://www.hangzhoujx.com/</p>
                            <el-input type="text" v-model.trim="form.guaranteeUrl" placeholder="请输入完整保单查询地址"></el-input>
                        </div>
                        <div>
                            <p>选择类目</p>
                            <el-select v-model="form.type">
                                <el-option v-for="(item,index) in selects" :key="index" class="declareSelect"
                                    :value="item.value" :label="item.label">{{item.label}}</el-option>
                            </el-select>
                        </div>
                    </div>
                    <div>
                        <p>营业执照和规范性文本</p>
                        <el-upload class="" drag :action="api.uploadFile"
                            :before-upload="beforeAvatarUpload" :on-success="uploadSuccess" :multiple="false"
                            name="file" :file-list="fileList">
                            <div v-if="String.isEmptyOrNUll(form.uploadFileUrl)">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text"><em>点击上传文件</em></div>
                            </div>
                            <div v-else>
                                <img style="margin-top: 22px;" src="/static/img/indexnew/declarepdf.png" alt="">
                                <p style="margin: 14px 0;font-size: 22px;text-align: center;">{{uploadFileName}}</p>
                                <div class="el-upload__text" style="margin: 6px 0;"><em>上传成功</em></div>
                            </div>
                            <span class="el-uploadzip">仅支持压缩文件(5M)以内</span>
                        </el-upload>
                        <p style="font-size: 17px;margin-top: 20px;">备注： 规范性文本指保函文本、保险合同文本或工程担保合同文本。</p>
                    </div>
                </div>
                <div class="text_center" label=" ">
                    <el-button class="declareBtn" type="primary" @click="onSubmit()">提交申请</el-button>
                    <!-- <a href="" class="declareLookBtn">查看上传模板</a> -->
                </div>
            </el-form>
        </el-main>
    </el-container>
</template>
<script>
    var _this;
    import common from '../../assets/basejs/common.js'
    export default {
        data() {
            return {
                fileList: [],
                selects: [{
                        label: "银行",
                        value: 0
                    },
                    {
                        label: "担保公司",
                        value: 1
                    },
                    {
                        label: "保险",
                        value: 2
                    }
                ],
                form: {
                    companyName: "",
                    realName: "",
                    fixTelephone: "",
                    telephone: "",
                    address: "",
                    guaranteeUrl: "",
                    type: "",
                    v_token: "s",
                    code: "",
                    uploadFileUrl: ""
                },
                uploadFileName: "",
                verifyCode: "获取短信验证码",
                disabled: false,
            }
        },
        beforeCreate() {
            _this = this;
            common._setVue(this);
        },
        methods: {
            beforeAvatarUpload: function(file) {
                this.uploadFileName = file.name;
                // var isIMAGE = (file.type === 'application/x-zip-compressed');
                // if (!isIMAGE) {
                //     this.$message.error('上传文件只能是压缩包（.zip格式）');
                //     return false
                // }
                if (parseInt(file.size / 1024 / 1024) > 5) {
                    this.$alert('压缩文件不能大于5M', '异常提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return false
                }
            },
            getVerifyCode: function() {
                var telephone = this.form.telephone;
                if (telephone == "") {
                    this.$message.error('请输入手机号！');
                    return;
                }
                common.post(this.api.getVerifyCodeUploadFile, {
                    telephone: telephone
                }, function(data) {
                    _this.form.v_token = data.resultMap;
                    _this.setInter();
                }, function(error) {
                    _this.$message.error(error.resultMsg);
                });

            },
            setInter: function() {
                var countDown = 60;
                var timer = setInterval(function() {
                    countDown--;
                    _this.verifyCode = "短信已发送（" + countDown + "）";
                    _this.disabled = true;
                    if (countDown < 1) {
                        clearInterval(timer);
                        _this.verifyCode = "获取短信验证码";
                        _this.disabled = false;
                    }
                }, 1000);
            },
            uploadSuccess: function(res) {
                this.form.uploadFileUrl = res.resultMap;
            },
            onSubmit() {
                if (String.isEmptyOrNUll(this.form.companyName)) {
                    this.$message.error("请输入单位名称！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.realName)) {
                    this.$message.error("请输入联系人！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.fixTelephone)) {
                    this.$message.error("请输入固定电话！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.address)) {
                    this.$message.error("请输入地址！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.telephone)) {
                    this.$message.error("请输入手机号！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.code)) {
                    this.$message.error("请输入验证码！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.type)) {
                    this.$message.error("请选择类目！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.uploadFileUrl)) {
                    this.$message.error("请上传压缩文件！");
                    return;
                }
                common.post(this.api.fileManagerUpload, this.form, function(res) {
                    _this.$message.success(res.resultMap);
                    _this.form = {};
                });
            }
        }
    }
</script>

<style>
    .declareRow {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .declareRow .el-input {
        margin-right: 0 !important;
    }

    .declareRow div:nth-child(1) {
        margin-right: 100px;
    }

    .declareRow div {
        width: 100%;
        text-align: center;
    }

    .declareRow div p {
        width: 100%;
        text-align: left;
    }

    .declare_getcode {
        width: 36%;
        height: 58px;
        line-height: 58px;
        cursor: pointer;
        text-align: center;
        outline: none;
        background: #3086F7;
        border-radius: 6px;
        color: #ffffff;
        font-size: 24px;
        border: 0;
    }

    form.el-form.declare .el-input .el-input__inner {
        height: 60px;
        line-height: 60px;
        font-size: 24px;
    }

    .declare div p {
        font-size: 28px;
        font-weight: 500;
        color: #333333;
        margin-bottom: 20px;
        margin-top: 50px;
    }

    .declare .el-upload-dragger {
        width: 100%;
        height: 260px;
        text-align: center;
    }

    .declare .el-upload.el-upload--text {
        width: 100%;
    }

    .declare .el-upload-dragger .el-upload__text {
        color: #3086F7;
        font-size: 28px;
        margin: 20px 0;
    }

    .declare .el-upload-dragger .el-icon-upload {
        font-size: 100px;
        margin-top: 48px;
    }

    .declare .el-uploadzip {
        color: #999999;
        font-size: 24px;
    }

    .declare ul.el-upload-list.el-upload-list--text {
        display: none;
    }

    .declareBtn {
        margin-top: 150px;
        width: 260px;
        height: 80px;
        background: #3086F7;
        box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        font-size: 32px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #FFFFFF;
        margin-bottom: 50px;
    }

    .declareLookBtn {
        font-size: 28px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #3086F7;
        margin-top: 20px;
        display: block;
        margin-bottom: 50px;
    }

    .declareSelect.el-select-dropdown__item {
        font-size: 20px !important;
        height: 44px !important;
        line-height: 44px !important;
    }
</style>
